import { Directive } from 'vue'
import { hasPermission, Permission, hasRole, Role } from './permission'

// v-permission 指令：根据权限控制元素的显示
export const vPermission: Directive = {
  mounted(el, binding) {
    const { value } = binding
    
    if (value && !hasPermission(value as Permission)) {
      // 如果没有权限，则从DOM中移除元素
      el.parentNode?.removeChild(el)
    }
  }
}

// v-role 指令：根据角色控制元素的显示
export const vRole: Directive = {
  mounted(el, binding) {
    const { value } = binding
    
    if (value && !hasRole(value as Role)) {
      // 如果不是指定角色，则从DOM中移除元素
      el.parentNode?.removeChild(el)
    }
  }
}

// 注册所有指令
export const setupDirectives = (app: any) => {
  app.directive('permission', vPermission)
  app.directive('role', vRole)
} 